<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>计划明细</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.js"></script>
<script type="text/javascript">
onload=function(){
	$('#va').each(function(){
		$(this).blur(sum);
	});
}
function remove(a){
	a.parentNode.parentNode.remove();
	sum();
}
function ne(){
	$("#nl").append("<tr><td align='right'><input style='text-align:right' name='key' id='dc' type='text' />：</td><td><input name='va' id='va' type='text' /> <a class='redd'  onclick='remove(this)'>-</a></td></tr>");
	$('input[name="va"]').each(function(){
		$(this).blur(sum);
	});
}
function sum(){
	var sum=parseFloat("0");
	$('*[name="va"]').each(function(){
		var s=$(this).val();
		if(s==''){s=0}
		sum+=parseFloat(s);
	})
	
	$("#mo").html(sum+" ￥"); 
	$("#money").val(sum);
}
function go(){
	$('#xiu').hide();
	$('#aiu').hide();
	$('input').each(function(){
		$(this).removeAttr("readonly");
	});
	$('.redd').each(function(){$(this).show();})
	$('#area').removeAttr("readonly");
	$('#hh').html("计划明细修改");
	$('#body').css('background-color','#FFC');
	$('#but').show();
	$('#xi').show();
	$('#ai').show();
}
function che(){
	sum();
	if(confirm("你确定更新吗？")){
		$('#form').submit();
	}
}
function  check(){
	var flag=0;
	$('*[name="va"]').each(function(){
		var a=$(this).val();
		if(a==''){$(this).css('border-color','red');$(this).val("请输入数字！");flag=1;
		}else{
			var el=/^\d*\.?\d*$/;
			if(!el.test(a)){
				$(this).css('border-color','red');
				$(this).val("必须为数字！");
				flag=2;
			}
		}
	})
	$('*[name="key"]').each(function(){
		var s=$(this).val();
		if(s==''){$(this).css('border-color','red');
		$(this).val("不能为空！");
		flag=3;}
	})
	if(flag==0){return true}else{return false;}
	
}
</script>
<style type="text/css">
	div{margin:0px auto;width:800px;
	padding:0px 20px;font-size:20px;
	}
	body{background-color:#CCC;
	}
	#dc{width:120px;}
	input,select,textarea{font-size:18px;width:250px;}
	a{padding:10px 25px;width:100px;text-decoration:none;background-color:green;}
	.redd{padding:3px 15px;margin-left:5px;background-color:orange;}
	a:hover{background-color:orange;cursor:pointer}
</style>

</head>

<body id="body">
<div >
<h2 id="hh" align="center">计划明细</h2>
	<form id="form" action="<%=request.getContextPath() %>/mplan/update" method="post" onsubmit="return check()">
	<input type="text" value="${mp.id }" name="id" hidden="hidden"/>
	<input type="text" value="${mp.pid }" name="pid" hidden="hidden"/>
	<input type="text" value="${mp.name }" name="pname" hidden="hidden"/>
	<input type="text"  id="money" name="money" hidden="hidden"/>
	<table align="center" height="70%" cellpadding="3px" id="nl">
		<tr>
			<td align="right">所属计划：</td>
			<td><font color="red" size="6">${mp.pname }</font></td>
		</tr><tr>
			<td align="right">明细标题：</td>
			<td><input readonly="readonly" type="text"  value="${mp.name }" name="name"/></td>
		</tr><tr>
			<td align="right">明细内容：</td>
			<td><textarea id="area" readonly="readonly"  name="mcontent" rows="3" cols="26"/>${mp.mcontent }</textarea></td>
		</tr><tr>
			<td align="right">材料：</td>
			<td align="center">成本(￥)：<button id="but" hidden="hidden" type="button" onclick="ne();">增加一行</button></td>
		</tr>
		<c:forEach items="${key }" var="k" varStatus="l">
		<tr >
			<td align="right"><input readonly="readonly"  id="dc" style="text-align:right" type="text" value="${k }" name="key"/>：</td>
			<td><input readonly="readonly"  type="text"  value="${va[l.index] }"  id="va" name="va"/><a class='redd' hidden="hidden" onclick='remove(this)'>-</a>
			</td>
		</tr>
		</c:forEach>
		<tfoot>
		<tr >
			<td align="right">总价格：</td>
			<td align="center"><font color="red" id="mo">${mp.money } ￥</font></td>
		</tr>
		<tr>
			<td colspan="2" height="60px" align="center">
				<a id="aiu" href="javascript:history.go(-1)">返回</a>
				<a id="ai" hidden="hidden" href="javascript:history.go(-2)">返回</a>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a id="xiu" href="#" onclick="go()">修改</a>
				<a id="xi" hidden="hidden" onclick="che()" href="#" >更新</a>
			</td>
		</tr>
		</tfoot>
	</table>
	</form>
	</div>
</body>
</html>